<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <button id="btn">点击发送请求</button>
    <script>
      const btn = document.querySelector('#btn')

      const findBanner = () => {}
      // options 配置项 包含 url请求接口路径 和 method请求方式
      const axios = options => {
        // axios是异步操作，当封装在一个函数中时，返回的值无法得到及时更新，且无法传出使用
        // 因此，需要用到 new Promise 的 resolve 参数来传出axios中返回的值
        return new Promise((resolve, reject) => {
          console.log('Promise回调函数内部代码执行了')
          $.ajax({
            ...options,
            success: res => {
              // resolve 可以理解为成功的时候，存储什么数据到 PromiseResult 中
              resolve(res)
              // resolve 存的东西通过 then() 获取
            },
            error: err => {
              // reject 可以理解为失败的时候，存储什么数据到 PromiseResult 中
              reject(err)
              // catch 存的东西通过 catch() 获取
            },
          })
        })
      }

      btn.addEventListener('click', () => {
        // $.ajax({
        //   url: 'https://apipc-xiaotuxian-front.itheima.net/home/banner',
        //   method: 'GET',
        //   success: res => {
        //     console.log(111, '获取数据成功', res)
        //   },
        //   error: err => {
        //     console.log(222, '失败', err)
        //   },
        //   complete: () => {
        //     console.log(3333, '请求完成,不管成功失败')
        //   },
        // })
        const p = axios({
          url: 'https://apipc-xiaotuxian-front.itheima.net/home/banner',
          method: 'GET',
        })

        p.then(res => {
          console.log(111, res)
        }).catch(err => {
          console.log(222, err)
        })
        console.log(p)
      })
    </script>
  </body>
</html>
